form
<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
        
      <el-form-item label="用户名称">
          <el-col :span="6">
        <el-input v-model="teacher.username"/>
        </el-col> 
      </el-form-item>
      
      <el-form-item label="用户密码" v-show="false">
          <el-col :span="6">
        <el-input v-model="teacher.password" />
        </el-col> 
      </el-form-item>


      <el-form-item label="邮箱" >
          <el-col :span="6">
        <el-input v-model="teacher.email" />
        </el-col>
      </el-form-item>
     
    <el-form-item label="用户头像">
    <el-upload
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-error="handleAvatarError"
        :action= "BASE_API+'/admin/minio/file/upload?module=avatar'"
        class="avatar-uploader">
        <img v-if="teacher.avatar" :src="teacher.avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"/>
    </el-upload>
    </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import request from '@/utils/request'
import teacherApi from '@/api/dfs/user'
export default {
  data() {
    return {
      BASE_API: process.env.VUE_APP_BASE_API,
      // 初始化讲师默认数据
      teacher: {
        sort: 0,
        level: 1,
        // password:"e10adc3949ba59abbe56e057f20f883e"
      },
      saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交
    }
  },
  // 页面渲染成功
  created() {
          if (this.$route.params.id) {
      this.fetchDataById(this.$route.params.id)
    }
  },
  methods: {
    saveOrUpdate() {
    // 禁用保存按钮
      this.saveBtnDisabled = true
      debugger
      if (!this.teacher.userId) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    // 新增讲师
    saveData() {
    // debugger
      teacherApi.save(this.teacher).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push({ path: '/dfs/user/list' })
      })
    },
    // 根据id更新记录
    updateData() {
        // teacher数据的获取
        teacherApi.updateById(this.teacher).then(response => {
            this.$message({
            type: 'success',
            message: response.message
            })
            this.$router.push({ path: '/dfs/user/list' })
        })
    },
    // 根据id查询记录
    fetchDataById(id) {
        teacherApi.getById(id).then(response => {
            this.teacher = response.data
        })
    },

        // 上传成功回调
    handleAvatarSuccess(res, file) {
      // console.log(res)
      if (res.code==20000) {
        // console.log(res)
        this.teacher.avatar = res.data
        // 强制重新渲染
        this.$forceUpdate()
      } else {
        this.$message.error('上传失败 （非0）')
      }
    },

    // 错误处理
    handleAvatarError() {
      console.log('error')
      this.$message.error('上传失败（http失败）')
    },

    // 上传校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  .avatar-uploader .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar-uploader .avatar-uploader-icon:hover {
    border-color: #409EFF;
  }
  .avatar-uploader img {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>